Skip to content

started feat(rest): Add Passport support - Issue #25 #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 56 commits into from
Closed

started feat(rest): Add Passport support - Issue #25 #36

wants to merge 56 commits into from

Conversation

kjellski
Copy link

Hey there,
as promised, I've started to put in the passport stuff. I think the server side is pretty much done, but since it's your project I would like to get feedback on where the "views" for the login and signup stuff should go. I think from the viewpoint of your template so far, it should go to the angular part.

Also, I would like to add serverside tests to test the logins model part. Do you prefer jasmine?

Any feedback is appreciated.

@DaftMonk
Copy link
Member

Cool, I'll take a closer look at this when I get the chance. For the login/sign up pages, it should create two angular routes/views. It will need templates for the jade versions as well.

Oh and with regard to tests, I prefer mocha for the server-side. I have a branch ready to go that would include mocha test support with the server, but I'm waiting on generator-karma to accept my pull request so that the test folder is configurable. Ideally I want the mocha tests to be in tests/server and the karma tests to be in tests/client. Anyway, until the generator supports mocha it probably should be left out of this feature, and we can add in the tests later.

@kjellski
Copy link
Author

@DaftMonk the more I'm working on this, the more I see problems with the current architecture. What do you think about migrating to a bit more sophisticated approach like the guys from mean.io? Maybe we could migrate to a better header handling with a navigation contoller? I'm trying to find a good way to include what I've got into the current layout and there is just no way to get this dry...

@DaftMonk
Copy link
Member

What are you having trouble with? Are you referring to middleware that you need to use to ensure the user is authenticated?

@kjellski
Copy link
Author

@DaftMonk no, that's already done. I'm refering to a non existent navigation controller on the angular side. Also not having separate configurations for the server side... there are many ways to improve, but they're totally unrelated to what I want to do with this PR... :/

@DaftMonk
Copy link
Member

Oh, I see. Well we may want to add a config folder for the separate configurations, like mean.io does, but as you say, it goes a bit beyond the scope of this PR.

The navigation controller is something that I didn't consider adding before, because it was just a single page starting app, but now if we're going to add more pages it probably should be included.

@kjellski
Copy link
Author

Would you mind putting the navigation controller in yourself and let me pull it in to my PR before? Or should I just add one myself and you'll accept it? Also, the karma task is currently not working for me, but I don't think it's from my changes...

@DaftMonk
Copy link
Member

I'll get to work on that.

Karma task should be working, it does in the current version of the generator. Perhaps the dependencies had trouble downloading?

DaftMonk added a commit that referenced this pull request Dec 16, 2013
Should make it easier to start building a multi-page app

required for #36
@DaftMonk
Copy link
Member

Added the navbar. I'm not sure how much that'll help because you're probably going to have to replace the navbar controller with a modified one that has the login/signup pages.

The most annoying part of adding a client feature to the generator is how redundant it is to support all the versions of the views/scripts. For 1 script file and 1 view file you need a version for html, jade, javascript, coffeescript, javascript-min, and coffeescript-min... very tedious, but it has to be done to support the existing options for the generator.

@kjellski
Copy link
Author

Heyyy @DaftMonk thanks a lot, this will make it much easier. I've already pulled but I won't get too much done today, it's already late. I'll keep you posted tomorrow.

Regarding the karma thing, can you pull you latest and just generate a full app with it? On my machine this tells me this all the time:

$ grunt test
Warning: Task "karma" not found. Use --force to continue.
Aborted due to warnings.

By the way, I think I've not even touched the Gruntfile.js... can you confirm that?

@DaftMonk
Copy link
Member

I just tried to generate an app with the latest version and couldn't replicate that problem in recent tests, but I believe its because the karma dependencies weren't added to the package.json.

I'm not sure why this is happening, but that is supposed to be taken care of by the karma generator, which generator-angular also relies on. I'll try a few more times and see if I can get it to happen.

Edit: I have noticed this happen a few times, the error is caused by missing dependencies. Not sure why, but the npm install that generator-karma starts must be failing sometimes.

@DaftMonk
Copy link
Member

yeoman/generator-angular#505 this may be the culprit to the missing dependencies. Seems that the workaround is pressing 1 and then enter during the installation if it gets stuck.

@kjellski
Copy link
Author

@DaftMonk thanks for the hint, it seems that I was missing the "generator-karma" global installation, but I had no time testing it yet. One question for you though, any ideas on how we should best switch out "sign up" and "login" for "logout" when someone is logged in?

Also, I've kind of hacked the app.js main angular module routes configuration over an environment variable, feels dirty, but I've not seen any better way.

I made a bit of progress today, but some TODOs are still missing:

  • auth controller in coffescript (will do when js is solid)
  • views for signup
  • logout button

As always, I would love to get feedback on anything :)

@DaftMonk
Copy link
Member

You're doing a great job. It looks like you're making a lot of progress on this.

We'll need a user object that should be either tied to the rootScope or to an injectable service. I normally would avoid putting anything in the rootScope to avoid polluting it, but I think attaching a user that could be shared by all controllers would be appropriate in this case. I've seen it done both ways though.

For getting the user from the server, there are two approaches I'm aware of. The one I used in angular-passport was to set a cookie with each request that has the username.

app.get('/*', function(req, res) {
  if(req.user) {
    res.cookie('user', JSON.stringify(req.user.user_info));
  }

  res.render('index.html');
});

then in client side i had the Auth service set the user to that cookie and then remove it.

$rootScope.currentUser = $cookieStore.get('user') || null;
$cookieStore.remove('user');

This feels a little hacky so I wasn't completely satisfied with it.

The other approach was what Mean.IO did. They use the templating language to bind a variable to the window named user, thats either true or false. Then they have a service that sets currentUser to whatever window.user is set to.

This approach feels dirty because it's mixing logic/data with the view.

I'd be happy to hear what your thoughts are on these two approaches, or if you have another idea.

Edit: on another note, I'm working on merging upstream with generator angular. The min-safe option is being deprecated in the latest version of generator-angular, and will be removed in the next version. I think it will be fine if we just include in the warning that the passport option is not supported for min-safe. This will save some time, and adding the min-safe version is tedious and benefits very few people.

…roject style, this will be gread after getting to server side generators
allows you to return proper validation errors when saving a duplicate of a field specified as unique in the schema
added settings page to navbar controller
fixed login/settings controllers to match changes to Auth service
Really annoying trying to figure out why the production build was throwing unknown provider errors!
@DaftMonk
Copy link
Member

DaftMonk commented Jan 9, 2014

Added my commits, seems like everything is working correctly. Now we just need to add jade/coffeescript templates.

@DaftMonk
Copy link
Member

DaftMonk commented Jan 9, 2014

Started working on the jade templates, just wanted to post so we don't do double work.

Update: Finished the jade templates and pushed the new version

@kjellski
Copy link
Author

kjellski commented Jan 9, 2014

👍 @DaftMonk Good job! I'll provide the coffeescript then ;)

kjellski and others added 3 commits January 9, 2014 22:48
- added coffeescripts for all the javascript equivalents
- moved navbar also to controllers folder, just for consistency
- TODO: extensive testing
@DaftMonk
Copy link
Member

@kjellski Awesome, I've added to your commits some missing coffeescript and it looks like everything is working! Before I merge I'd like you to test it on your end again and see if it all looks ok. The 'watch' task issue sounds like a problem with your npm install. I'd either try generating a fresh project or running npm install grunt-contrib-watch --force.

- fixed tab indentation, most of the codebase is without
@kjellski
Copy link
Author

@DaftMonk thanks for the hint, that worked out.

I've fixed a small bug in navbar.coffee and I think we're pretty good to go. I would like to let the people from the feature request have a look when you've merged it in master, or do you think just releasing it is better?

@DaftMonk
Copy link
Member

@kjellski That's fine with me. Once it's merged I'll still need to add connect-mongo before we can release it.

I'm a bit confused by the commit you just added. Did you intend to push to that repository? A lot of that code is very outdated.

@DaftMonk
Copy link
Member

Just fyi, I'm going to squash this branch down as a single feature when I merge.

@kjellski
Copy link
Author

@DaftMonk I'm sorry, I seem to have missed something... I just tried to test your last checkins and found a bug in the navbar.coffee, now that I've pulled in both of your branches, I can see that I've added the exact code you added too... my bad. Sorry!

…stack

Conflicts:
	templates/coffeescript/controllers/navbar.coffee
DaftMonk added a commit that referenced this pull request Jan 11, 2014
generates

  * Passport configuration and a User model

  * API routes for account creation/sign in

  * Login and signup views with form validation,
    including handling server validation errors

  * Settings view for changing your password

  * Angular Auth service for creating accounts/logining

closes #25, #36
@DaftMonk
Copy link
Member

@kjellski Great minds think alike ;).

I just pushed a series of commits that should make the current version ready for release. Merged the passport branch into master. I've restructured the application a bit, and its much more clearly organized, and easier to read.

I've also separated out the config into its own file, which grabs the environment config based on the node environment, the same way the mean.io boilerplate does their config.

And I've added connect-mongo for peristant sessions, to replace the current in-memory sessions.

I'll do some more testing on this to make sure it's stable before release.

@DaftMonk
Copy link
Member

Just released the new version over npm and wrote a blog about it http://tylerhenkel.com/angular-fullstack-1-2-0-available-now/

@kjellski Thanks so much for your help on this! I hope we can work more together on future additions to the generator. I'm going to close this issue, but we can continue posting here.

@DaftMonk DaftMonk closed this Jan 11, 2014
@kjellski
Copy link
Author

@DaftMonk thanks to you! Really great that it's out! You started this, but this was my real first bigger contribution to an open source project and I am really feeling welcome here :) thanks for letting me.

I'll love to start building more features with you! But I'm sort of the back-end guy in my day to day job, so bear with me when I do something wrong, I'm always open for feedback!

@Yankovsky
Copy link
Contributor

Can someone please explain for me why we need to remove cookie after obtaining it from server?

$cookieStore.remove('user');

Security reasons? Or just small optimization to reduce bandwidth?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants